<template>
  <div class="departments-container">
    <div class="app-container">
      <!--
        el-card 组件
        el-col  列
          默认是占满一行 / 一行是24份
          :span="24"
          支持行内样式 style
          默认是水平浮动
        el-row 行
       -->

      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局
             type="flex"
             justify="space-between"
             align="middle"
        -->
        <!-- 头部结构 -->
        <TreeTools
          :node-data="company"
          root
          @add-depts="addDeptsFn"
        />
        <!-- 树形结构 -> 内部会进行遍历 -->
        <!-- 插槽: 自定义结构 -->
        <!-- 根据文档示例: slot-scope="{data}" -->
        <!-- 1. 内部封装的 插槽身上 <slot name="default" :node="xxx" :data="xx"></slot> -->
        <!-- 2. 在插槽身上绑定的数据最终会收集到一个对象中 {node: xxx, data: xxx }  -->
        <!-- 3. <template  #default="{data}"></template> -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- node data 是 el-tree内部插槽提供的数据 -->
          <!-- node 不需要 -> 底层一些节点信息 -->
          <!-- data 想要去获取的数据 -> 数组中的每一项 -> 内部进行了遍历的操作 -->
          <template #default="{data}">
            <!-- tree子节点的宽度默认是由内容撑开的 -->
            <TreeTools
              :node-data="data"
              @del-depts="getDepartments"
              @add-depts="addDeptsFn"
              @edit-depts="editDeptsFn"
            />
          </template>
        </el-tree>
      </el-card>

      <!-- 对话框 -->
      <AddDepts
        ref="addDepts"
        :dialog-visible="dialogVisible"
        :depts-list="deptsList"
        :node-data="nodeData"
        @add-depts-update-list="getDepartments"
        @update:dialogVisible="val=>dialogVisible=val"
      />

    </div>
    <!-- 测试组件 -->
  </div>
</template>

<script>
import TreeTools from './components/TreeTools'
import AddDepts from './components/AddDepts'
import { reqGetDepartments } from '@/api/departments'
import { transTreeData } from '@/utils'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDepts
  },
  data() {
    return {
      loading: false,
      // 保留当前点击的部门信息
      nodeData: {},
      // 保留原始的数据
      deptsList: [],
      // 控制弹层的显示隐藏
      dialogVisible: false,
      // 准备头部结构的数据 -> name, manager
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      // 树形的数据 -> 数组 [{}, {}, {}]
      // 每一个对象都是一个树形节点, label (最外层的label)一级标题, 作用: 设置文字描述
      // children 设置孩子节点, 类型也必须是数组
      departs: [],
      // 修改默认的配置
      defaultProps: {
        // 将标题的文字描述修改成name字段
        label: 'name',
        // 将子节点的属性名修改成child
        children: 'children'
      }
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 获取部门列表
    async getDepartments() {
      this.loading = true
      //  await new Promise((resolve)=>{
      //     setTimeout(()=>{
      //       resolve()
      //     },1500)
      //  })

      const { data: { depts, companyName }} = await reqGetDepartments()
      console.log(depts)
      this.deptsList = depts
      // 使用递归 -> 数据结构
      // id 自己部门的id
      // parent id 父级的id -> 通过pid来找到父级部门
      // 1. 先找一级部门 -> pid === ''
      this.company.name = companyName
      // 所有的一级部门的pid是''
      this.company.id = ''
      // 参数1: 原始数据 参数2: pid
      this.departs = transTreeData(depts, '')
      // this.departs = depts
      this.loading = false
    },
    // 子传父 -> 显示弹窗 -> 添加部门
    // 通过形参 -> 接收到点击的部门信息
    addDeptsFn(nodeData) {
      this.dialogVisible = true // 显示弹窗
      this.nodeData = nodeData
      this.$refs.addDepts.dialogTitle = '添加部门'
      // console.log('--当前点击的部门信息---', nodeData)
      // 对话框显示 -> 发送请求了
      // 通过this.$refs.xxx 获取组件实例 -> 操作组件内的方法
      // this.$refs.addDepts.getSimpleUserList()
    },
    editDeptsFn(nodeData) {
      this.dialogVisible = true // 显示弹窗
      this.nodeData = nodeData // 点击时操作的部门信息
      this.$refs.addDepts.dialogTitle = '编辑部门'
      console.log(nodeData)
      this.$refs.addDepts.getDepartDetail(nodeData.id)
    }
    // 关闭弹窗

  }
}
</script>

<style lang="scss" scoped>
// scoped只让样式作用于当前组件本身, 没有办法深入到组件内部
// demo-child 子组件的内部的元素
// 结论: 想让样式渗透到组件的内部
// 需要通过: 深度作用选择器
// scss ::v-deep
// less /deep/

::v-deep {
  .demo-child {
    background-color: skyblue;
    color: teal;
    font-size: 30px;
  }
}

// 利用伪元素, 设置宽高
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有expanded这个类 -> 展开  / 没有 -> 收起
    // 有is-leaf这个类 -> 没有子节点
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
